<template>
  <div class="mulitpage">
    <div class="mulit-invite-head bg_fff p-16">
      <div :class="['search-filter', pageType === 2 && 'gap-column']">
        <el-button
          v-hasPermi="['system:mulitinvite:addtask']"
          type="primary"
          plain
          size="small"
          v-if="pageType === 1"
          @click="onNavigationTo('/communityOperation/mulit-invite/add')"
        >
          <i class="el-icon-plus el-icon--left"></i>新建任务
        </el-button>
        <el-button
          v-hasPermi="['system:mulitinvite:set']"
          type="primary"
          plain
          size="small"
          class="icon-button flexcenter"
          v-if="pageType === 1"
          @click="handleSet"
        >
          <i class="el-icon-setting"></i>
        </el-button>
        <el-select v-model="form.task" placeholder="任务状态" size="small">
          <el-option
            v-for="item in taskList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-if="!single"
          v-model="form.account"
          placeholder="全部"
          size="small"
        >
          <el-option
            v-for="item in accountList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          placeholder="搜任务"
          v-model="form.name"
          @keyup.enter.native="handleQuery"
          class="x-input-select"
          style="width: 172px"
          size="small"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <!-- <el-input
          class="search-input"
          size="small"
          placeholder="搜任务"
          suffix-icon="el-icon-search"
        /> -->
      </div>
    </div>
    <div class="content-wrap">
      <div class="left">
        <div class="list-wrap pl-12 pt-12 pb-20" v-if="pageType === 1">
          <div class="task-list">
            <div
              class="task-item w_full p-12 mb-8 bg_fff br_4 commhover"
              v-for="(i, index) in 4"
              :key="index"
            >
              <div class="task-bd">
                <div class="info">
                  <div class="task-icon flexcenter">
                    <img
                      class="status-img w_full h_full"
                      src="@/assets/images/quxiao.png"
                    />
                  </div>
                  <div class="info-text">
                    <div class="title textover fw-7 line_h_22 c_000">
                      22222222
                    </div>
                    <span class="line_h_22 textover f-12 c_text3"
                      >已选：0客户 1企业成员</span
                    >
                  </div>
                </div>
                <div class="actions">
                  <div class="space-flex flex aligncenter c_text3">
                    <span style="color: rgba(0, 0, 0, 0.45)">已取消</span>
                    <el-dropdown>
                      <i class="el-icon-more more-icon"></i>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-hasPermi="['system:mulitinvite:copy']">复制（全部对象）</el-dropdown-item>
                        <el-dropdown-item v-hasPermi="['system:mulitinvite:copy']"
                          >复制（仅未发送对象）</el-dropdown-item
                        >
                        <el-dropdown-item v-hasPermi="['system:mulitinvite:copy']">复制（仅内容）</el-dropdown-item>
                        <el-dropdown-item v-hasPermi="['system:mulitinvite:editgroup']">修改分组</el-dropdown-item>
                        <el-dropdown-item v-hasPermi="['system:mulitinvite:delete']">删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </div>
              <div class="footer f-12 c_text3 line_h_20 flexbetween">
                <div class="account-info c_text2 br_4">
                  ID:18691191<span style="margin-left: 4px">主账号创建</span>
                </div>
                <div class="time">2024-03-21 11:27</div>
              </div>
            </div>
          </div>
        </div>
        <div class="empty-content" v-else>
          <img class="empty-cover" src="@/assets/images/market_empty.png" />
          <p>暂无任务，请创建</p>
        </div>
      </div>
      <div class="right">
        <div class="rightbody p-20">
          <template v-if="pageType === 1">
            <div class="wrap">
              <div class="task-info">
                <div class="title">22222222222</div>
                <div class="task-info-tags">
                  <div class="taskstatus f-12 flexcenter br_4 warn_border mr-8">
                    主账号下发
                  </div>
                  <div class="taskstatus f-12 c_fff flexcenter br_4 finsh">
                    等待中
                  </div>
                  <!-- <div class="taskstatus f-12 c_fff flexcenter br_4 warn">等待中</div> -->
                  <!-- <div class="task-item">单次定时群发消息任务</div>
                    <div class="task-item" style="background-color: rgba(0, 0, 0, 0.25);color: #fff;">已取消</div> -->
                </div>
              </div>
              <div class="card-info-list flex">
                <div class="cardlist_item">
                  <div class="w_full mb-12">创建时间：2024-04-11 14:12</div>
                  <div class="w_full mb-12">开始时间：2024-04-11 14:12</div>
                  <div class="w_full mb-12">结束时间：--</div>
                </div>
                <div class="cardlist_item">
                  <div class="w_full mb-12">
                    <span class="itemtitle"> 目标群条件：</span
                    ><span
                      class="commhover c_primary"
                      @click="handleDetail('目标群', 1)"
                      >查看</span
                    >
                  </div>
                  <div class="w_full mb-12">
                    <span class="itemtitle"> 入群前引导语：</span
                    ><span
                      class="commhover c_primary"
                      @click="handleDetail('入群前引导语', 2)"
                      >查看</span
                    >
                  </div>
                  <div class="w_full mb-12">
                    <span class="itemtitle"> 拉群对象：</span>
                    <span
                      class="commhover c_primary"
                      @click="handleDetail('拉群对象', 3)"
                      >查看</span
                    >
                  </div>
                </div>
              </div>

              <template v-if="single">
                <div class="flexbetween mb-16">
                  <div class="f-16 fw-6">群进度</div>
                  <div>
                    <el-select
                      v-model="form.task"
                      placeholder="任务状态"
                      size="small"
                      style="width: 120px"
                      class="mr-10"
                    >
                      <el-option label="已处理（0）" :value="1"></el-option>
                      <el-option label="未处理（2）" :value="1"></el-option>
                    </el-select>
                    <el-input
                      class="search-input"
                      size="small"
                      placeholder="搜群名"
                      style="width: 140px"
                    />
                  </div>
                </div>
                <el-table
                  v-loading="loading"
                  :data="tableList"
                  ref="multipleTable"
                >
                  <el-table-column
                    label="目标群"
                    prop="userName"
                  >
                    <template slot-scope="scope">
                      <div class="flex kh_box aligncenter">
                        <img
                          src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                          alt=""
                          class="useravatar"
                        />
                        <div class="khnamebox pl-12">
                          <div class="title line_h_22 c_222333">
                            {{ scope.row.name || "--" }}
                          </div>
                          <div class="c_warning2 line_h_22 f-12">@锐行</div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="进度状态"
                    prop="userName"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.number || 0 }} / {{ scope.row.number1 || 0 }}
                    </template>
                  </el-table-column>
                  <!-- <el-table-column
                        label="发送状态"
                        prop="userName"
                        :show-overflow-tooltip="true"
                        >
                        <template slot-scope="scope">
                            {{ scope.row.status }} 暂停中
                        </template>
                        </el-table-column> -->
                  <template slot="empty">
                    <TableEmpty
                      :imgsrc="require('@/assets/images/empty1.png')"
                      width="90px"
                    />
                  </template>
                </el-table>
              </template>
              <template v-else>
                <div class="flexbetween mb-16">
                  <div class="f-16 fw-6">任务进度（1/2）</div>
                </div>
                <el-table
                  v-loading="loading"
                  :data="tableList"
                  ref="multipleTable"
                >
                  <el-table-column
                    label="企微号"
                    prop="userName"
                    min-width="160"
                  >
                    <template slot-scope="scope">
                      <div class="flex kh_box aligncenter">
                        <img
                          src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                          alt=""
                          class="useravatar"
                        />
                        <div class="khnamebox flex pl-12">
                          <div class="title c_222333">
                            {{ scope.row.name || "--" }}
                          </div>
                          <div class="c_warning2 f-12">@锐行</div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="拉群进度"
                    prop="userName"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.number || 0 }} / {{ scope.row.number1 || 0 }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="发送状态"
                    prop="userName"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.status }} 暂停中
                    </template>
                  </el-table-column>
                  <template slot="empty">
                    <TableEmpty
                      :imgsrc="require('@/assets/images/empty1.png')"
                      width="90px"
                    />
                  </template>
                </el-table>
              </template>
            </div>
            <div class="flexcenter rightfoot">
              <el-button type="primary" plain size="small">暂停任务</el-button>
              <el-button type="primary" plain size="small">取消任务</el-button>
            </div>
          </template>
          <div v-else class="empty-content">
            <img class="empty-cover" src="@/assets/images/peiyNU.png" />
          </div>
        </div>
      </div>
    </div>
    <!-- 单号设置 -->
    <setSendPage
      v-if="showSetSendPage"
      :visableIf.sync="showSetSendPage"
    ></setSendPage>
    <!-- 多号设置 -->
    <SendSettingDialog :visableIf.sync="showEditSendSettings" />
    <AutoExceptionsDialog
      :visible="autoExceptionVisible"
      @handCloseDialog="onHandCloseAutoExceptionDialog"
    />
    <SendRequireDialog
      :visible="sendRequireVisible"
      @handCloseDialog="onHandClosesendRequireDialog"
    />
    <!-- 目标群条件 -->
    <info-detail v-if="showinfo" :visableIf.sync="showinfo" :title="title" />
    <!-- 入群前引导语 -->
    <InfoWelcomMsg v-if="showmsg" :visableIf.sync="showmsg" />
    <!-- 拉群对象 -->
    <InfoGroupTable v-if="showgroup" :visableIf.sync="showgroup" />
  </div>
</template>
<script>
import SendSettingDialog from "./components/sendSettingDialog";
import AutoExceptionsDialog from "./components/autoExceptionsDialog";
import SendRequireDialog from "./components/SendRequireDialog";
import InfoDetail from "./components/InfoDetail.vue";
import InfoWelcomMsg from "./components/InfoWelcomMsg.vue";
import InfoGroupTable from "./components/InfoGroupTable.vue";
import setSendPage from "./components/setSendPage.vue";
export default {
  data() {
    return {
      single: true, //单号模式
      form: {
        value: "",
        account: "",
        type: "",
        task: "",
        dateTime: "",
      },
      accountList: [
        { value: "", label: "全部" },
        { value: "1", label: "主账号" },
        { value: "2", label: "员工1" },
        { value: "3", label: "员工2" },
      ],
      taskList: [
        // { value: "", label: "全部" },
        { value: "1", label: "创建中" },
        { value: "2", label: "等待中" },
        { value: "3", label: "发送中" },
        { value: "4", label: "已完成" },
        { value: "5", label: "暂停中" },
        { value: "6", label: "已取消" },
      ],
      infoList: [
        { id: 1, label: "创建人：", value: "主账号" },
        { id: 2, label: "创建时间：", value: "2024-02-26 11:27" },
        { id: 3, label: "开始时间：", value: "2024-03-21 11:27" },
        { id: 4, label: "结束时间：", value: "2024-02-27 13:41" },
        {
          id: 5,
          label: "群发对象条件：",
          value: "查看",
          onfunc: () => {
            this.sendRequireVisible = true;
          },
        },
        { id: 6, label: "单向好友：", value: "不发送" },
        { id: 7, label: "分组：", value: "不分组" },
        {
          id: 8,
          label: "异常自动处理：",
          value: "查看",
          onfunc: () => {
            this.autoExceptionVisible = true;
          },
        },
      ],
      tabsValue: "1",
      tableData: [],
      showEditSendSettings: false,
      showSetSendPage: false,
      autoExceptionVisible: false,
      sendRequireVisible: false,
      loading: false,
      tableList: [
        { id: 1 },
        { id: 2 },
        { id: 3 },
        { id: 4 },
        { id: 5 },
        { id: 6 },
        { id: 7 },
      ],
      showinfo: false,
      title: "",
      showmsg: false,
      showgroup: false,
    };
  },
  props: {
    pageType: {
      type: Number,
      default: 1,
    },
  },
  components: {
    SendSettingDialog,
    AutoExceptionsDialog,
    SendRequireDialog,
    InfoDetail,
    InfoWelcomMsg,
    InfoGroupTable,
    setSendPage,
  },
  methods: {
    onNavigationTo(path) {
      if (this.single) {
        this.$router.push({ path: "mulit-invite/add" });
      } else {
        this.$router.push(path);
      }
    },
    onHandCloseAutoExceptionDialog() {
      this.autoExceptionVisible = false;
    },
    onHandClosesendRequireDialog() {
      this.sendRequireVisible = false;
    },

    handleDetail(title, type) {
      if (type == 1) {
        this.title = title;
        this.showinfo = true;
      }
      if (type == 2) {
        this.showmsg = true;
      }
      if (type == 3) {
        this.showgroup = true;
      }
    },

    handleSet() {
      if (this.single) {
        this.showSetSendPage = true;
      } else {
        this.showEditSendSettings = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mulit-invite-head {
  border-bottom: 1px solid #f0f0f0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  .search-filter {
    display: grid;
    grid-template-columns: 104px 31px 100px 100px 172px;
    column-gap: 8px;
    &.gap-column {
      grid-template-columns: 100px 100px 172px;
    }
    .icon-button {
      margin-left: 0 !important;
    }
  }
}
.content-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  height: calc(100% - 65px);
  overflow: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  .left {
    width: 390px;
    height: 100%;
    background: #f3f3f3;
    border-right: 1px solid #e9e9e9;
    position: relative;
    &::before {
      position: absolute;
      left: 0;
      top: 0;
      content: "";
      width: 6px;
      height: 100%;
      background-color: #fff;
    }
    .list-wrap {
      height: 100%;
      overflow: auto;
      .task-list {
        box-sizing: border-box;
        width: 364px;
        .task-item {
          border: 1px solid #fff;
          .task-bd {
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            .info {
              flex: 1 1;
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              .task-icon {
                position: relative;
                width: 48px;
                height: 48px;
                margin-right: 12px;
                border-radius: 6px;
              }
              .info-text {
                flex: 1 1;
                overflow: hidden;
                .title {
                  max-width: 180px;
                }
                span {
                  display: block;
                  max-width: 200px;
                }
              }
            }
            .space-flex {
              gap: 5px;
              .more-icon {
                font-size: 10px;
              }
            }
          }
          .footer {
            position: relative;
            margin-top: 12px;
            padding: 4px 0;
            .account-info {
              border: 1px solid #f0f0f0;
              padding: 4px 10px;
            }
          }
        }
      }
    }
    .empty-content {
      height: calc(100vh - 250px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .empty-cover {
        width: 48px;
        height: 48px;
      }
      p {
        color: rgba(0, 0, 0, 0.25);
      }
    }
  }
  .right {
    flex: 1 1;
    background: #fff;
    align-self: stretch;
    position: relative;
    height: 100%;

    .rightbody {
      height: calc(100% - 50px);
      overflow-y: auto;
    }
    .task-info {
      .title {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
      }
      .task-info-tags {
        display: flex;
        align-items: center;
        .taskstatus {
          padding: 2px 7px;
          line-height: 24px;
          background-color: #3070ff;
          &.warn {
            background-color: #ff8243;
          }
          &.warn_border {
            background-color: #fff7e6;
            border: 1px solid #ffd591;
            color: #d46b08;
          }
          &.finsh {
            background-color: #00c270;
          }
        }
      }
    }
    .card-info-list {
      background-color: #f3f3f3;
      border-radius: 4px;
      margin: 12px 0 20px;
      padding: 12px 12px 0;
      .cardlist_item {
        width: 260px;
      }
      .itemtitle {
        display: inline-block;
        width: 100px;
      }
    }
    .empty-content {
      margin: 150px 8px;
      line-height: 1.5715;
      text-align: center;
      .empty-cover {
        width: 100px;
        height: 100px;
        margin-bottom: 8px;
      }
    }

    .rightfoot {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 50px;
      background: #fff;
      border-top: 1px solid #e9e9e9;
      text-align: center;
    }
  }
}
::v-deep .el-table--border th.el-table__cell,
::v-deep .el-table td.el-table__cell {
  border-bottom: none !important;
}
::v-deep .el-table--border .el-table__cell {
  border-right: none !important;
}
::v-deep .el-table--group,
.el-table--border {
  border: none !important;
}
.mulitpage {
  height: calc(100% - 76px);
}
</style>
